<template>
  <el-dialog
    :title="businessDialogTitle"
    :visible="showDialog"
    width="50%"
    center
    :close-on-click-modal="false"
    @close="closeDialog"
    @open="getSelectValues"
  >
    <!-- tab 栏 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="资质合同" name="first">
        <el-radio-group v-model="radio" @input="getSelectValues">
          <el-radio :label="1">新办</el-radio>
          <el-radio :label="2">增项</el-radio>
          <el-radio :label="3">转让</el-radio>
          <el-radio :label="4">升级</el-radio>
          <el-radio :label="5">分立</el-radio>
        </el-radio-group>
      </el-tab-pane>
      <el-tab-pane label="安许合同" name="second">
        <el-radio-group v-model="radio" @input="getSelectValues">
          <el-radio :label="6">新办</el-radio>
          <el-radio :label="7">延期</el-radio>
        </el-radio-group>
      </el-tab-pane>
    </el-tabs>
    <!-- 下拉框 -->
    <div class="select">
      <span>合作业务：</span>
      <el-select
        v-model="values"
        multiple
        filterable
        placeholder="请选择合作业务"
      >
        <el-option
          v-for="item in options"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 不是签单  不显示下面 -->
    <div class="successShow" v-if="businessDialogTitle !== '添加意向客户'">
      <!-- 合同金额 -->
      <div class="contract">
        <span>合同金额：</span>
        <el-input
          placeholder="请输入合同金额"
          v-model="contractValue"
          clearable
        >
        </el-input>
      </div>
      <!-- 预付款 -->
      <div class="readyPay">
        <span>预付金额：</span>
        <el-input placeholder="请输入预付款金额" v-model="readyPay" clearable>
        </el-input>
      </div>
      <!-- 成交日期 -->
      <div class="transactionTime">
        <span>签约日期：</span>
        <el-date-picker
          v-model="transactionTimeValue"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click.native.prevent="closeDialog">取 消</el-button>
      <el-button type="primary" @click.native.prevent="submitCustomer()"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import {
  getBusinessTypeListApi,
  getSelectValuesApi,
  addSuccessCustomerApi
} from '@/api/company'
import { addIntentionCustomerApi } from '@/api/anxu'
export default {
  name: 'business-type',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    businessDialogTitle: {
      type: String,
      default: ''
    },
    cname: {
      type: String,
      default: ''
    },
    // 获取 我的意向 列表
    getMyIntentionList: {
      type: Function,
      default: null
    },
    // 获取安许列表
    getMyAnxuList: {
      type: Function,
      default: null
    },
    company_id: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      activeName: 'first',
      // 单选绑定值
      radio: 1,
      options: [],
      values: [],
      contractValue: '',
      readyPay: '',
      transactionTimeValue: ''
    }
  },
  methods: {
    // 获取 签单下拉框业务种类 类型
    async getBusinessTypeList () {
      const { data: res } = await getBusinessTypeListApi()
      console.log(res)
    },
    // 获取下拉框得值
    async getSelectValues () {
      const { data: res } = await getSelectValuesApi(this.radio)
      // console.log('获取下拉框得值', res)
      this.options = [...res.data]
    },
    // 点击确认
    async submitCustomer () {
      if (this.businessDialogTitle === '添加意向客户') {
        // 添加意向客户
        if (this.values.length === 0) {
          return this.$message({
            showClose: true,
            message: '请选择合作业务!',
            type: 'warning',
            duration: 1500
          })
        }
        // console.log('下拉框选择的参数', this.values)
        const { data: res } = await addIntentionCustomerApi(
          this.company_id,
          this.values
        )
        // console.log('添加意向客户', res)
        if (res.code === 200) {
          this.$emit('closeDialog')
          this.radio = 1
          this.values = []
          // 消息提醒
          this.$message({
            showClose: true,
            message: '成功添加到我的意向客户!',
            type: 'success',
            duration: 1500
          })
          // 渲染安许的意向客户列表
          this.getMyAnxuList()
        }
      } else {
        // 添加成交客户
        if (
          this.values.length === 0 ||
          this.contractValue === '' ||
          this.transactionTimeValue === '' ||
          this.readyPay === ''
        ) {
          return this.$message({
            showClose: true,
            message: '请填写相关信息!',
            type: 'warning',
            duration: 1500
          })
        }
        const { data: res } = await addSuccessCustomerApi({
          type: this.radio,
          cate: this.values,
          money: this.contractValue,
          date: this.transactionTimeValue,
          readyPay: this.readyPay,
          cname: this.cname
        })
        // console.log('添加成交客户', res)
        if (res.code === 200) {
          // 关闭弹窗
          this.$emit('closeDialog')
          // 清空表单
          this.radio = 1
          this.values = []
          this.contractValue = ''
          this.transactionTimeValue = ''
          this.readyPay = ''
          // 消息提醒
          this.$message({
            showClose: true,
            message: '成功添加到我的成交客户!',
            type: 'success',
            duration: 1500
          })
          // 渲染页面列表 我的意向 列表
          this.getMyIntentionList()
        }
      }
    },
    // 关闭弹窗
    closeDialog () {
      // 当关闭弹窗的时候  tab栏和选项恢复默认
      this.radio = 1
      this.activeName = 'first'
      this.$emit('closeDialog')
    },
    // 切换tab栏 默认选择的业务类型
    handleClick () {
      this.values = []
      if (this.activeName === 'first') {
        this.radio = 1
        this.getSelectValues()
      } else {
        this.radio = 5
        this.getSelectValues()
      }
    }
  }
}
</script>

<style lang="scss">
.el-dialog {
  .el-dialog__header {
    background-color: rgb(84, 92, 100);
    padding: 20px 20px 20px;
    .el-dialog__title {
      color: #fff;
    }
  }
  .el-tabs {
    .el-tab-pane {
      display: flex;
      flex-direction: column;
      .el-radio-group {
        margin-top: 20px;
      }
    }
  }
  .select {
    margin-top: 20px;
    .el-select {
      margin-top: 10px;
      width: 300px;
    }
  }
  .el-input {
    width: 300px;
  }
  .contract {
    margin-top: 20px;
  }
  .transactionTime {
    margin-top: 20px;
  }
  .readyPay {
    margin-top: 20px;
  }
}
</style>
